<template>
  <div>
    <el-row>
      <el-page-header @back="goBack"></el-page-header>
    </el-row>
    <el-row style="margin-top: 30px">
      <el-col :span="2">
        <el-button type="primary"
                   size="small" icon="el-icon-plus" round @click="workDialog=true">新建作业
        </el-button>
        <el-dialog title="新建作业" :visible.sync="workDialog" :before-close="uploadCancel" width="600px" center>
          <el-row style="margin-top: 20px">
            <el-col :span="20" :offset="3">
              <div class="block">
                <el-date-picker
                  v-model="date"
                  type="datetimerange"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="作业开始日期"
                  end-placeholder="作业结束日期"
                >
                </el-date-picker>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="3" style="margin-top: 25px;">
              <el-input
                label="作业名称"
                type="text"
                v-model="workName"
                placeholder="作业名称"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :offset="3" style="margin-top: 25px;">
              <el-upload
                class="upload-demo"
                ref="upload"
                action="/api/common/work"
                accept=".txt"
                :file-list="fileList"
                :headers="{Authorization:this.$store.state.authorization}"
                :data="{date:this.date,courseId:this.courseId,workName:this.workName}"
                :on-success="handleSuccess"
                :auto-upload="false">
                <div slot="tip" class="el-upload__tip">只能上传text文件</div>
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-col>
          </el-row>
          <div slot="footer" class="dialog-footer">
            <el-button @click="uploadCancel">取 消</el-button>
            <el-button type="primary" @click="submitUpload">提 交</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
    <el-row style="margin-top: 15px">
      <el-table
        :data="tableData"
        empty-text="暂无作业"
        style="width: 600px">
        <el-table-column
          prop="workName"
          label="作业名称"
          width="100">
        </el-table-column>
        <el-table-column
          label="开始日期"
          width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.contentStartTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="结束日期"
          width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.contentEndTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="release(scope.$index, scope.row)">发布
            </el-button>
            <el-dialog title="选择学生" :visible.sync="dialogFormVisible" width="600px" :before-close="cancel" center>
              <el-table
                :data="studentTable.filter(data => !search
                      || data.className.toLowerCase().includes(search.toLowerCase())
                      || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  type="selection"
                  width="60">
                </el-table-column>
                <el-table-column
                  label="所属班级"
                  prop="className">
                </el-table-column>
                <el-table-column
                  label="学生姓名"
                  prop="name">
                </el-table-column>
                <el-table-column>
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"/>
                  </template>
                </el-table-column>
              </el-table>
              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="check">确定发布</el-button>
              </div>
            </el-dialog>
            <el-button
              style="margin-left: 15px"
              size="mini"
              type="text"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'WorkLibrary',
  data () {
    return {
      courseId: undefined,
      dialogFormVisible: false,
      workDialog: false,
      tableData: [],
      studentTable: [],
      search: '',
      currentRow: {},
      userIds: [],
      date: undefined,
      workName: undefined,
      fileList: [],
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    release (index, row) {
      this.dialogFormVisible = true
      this.currentRow = row
    },
    cancel () {
      this.dialogFormVisible = false
      this.userIds = []
    },
    check () {
      this.$http.post('/api/workRecord', {
        userIds: this.userIds,
        contentId: this.currentRow.contentId,
        courseId: this.courseId
      }).then((res) => {
        if (res.data.code === 2000) {
          this.$notify.success('成功发布')
        } else {
          this.$notify.error('发布失败')
        }
        this.cancel()
      })
    },
    handleSelectionChange (val) {
      let ids = []
      for (let i = 0; i < val.length; i++) {
        ids.push(val[i].id)
      }
      this.userIds = ids
    },
    handleDelete (index, row) {
      if (this.isDuringDate(row.contentEndTime)){
        this.$http.post('/api/workContent/del/' + row.contentId).then((res) => {
          if (res.data.code === 2000) {
            this.$notify.success('成功删除作业')
            this.$http.get('/api/workContent/list/' + this.courseId).then((res) => {
              this.tableData = res.data.result
            })
          } else {
            this.$notify.error('删除作业失败')
          }
        })
      }else {
        this.$notify.error('未到结束时间不能删除作业!')
      }
    },
    submitUpload () {
      this.$refs.upload.submit()
    },
    handleSuccess () {
      this.$notify.success('上传成功')
      this.uploadCancel()
      this.$http.get('/api/workContent/list/' + this.courseId).then((res) => {
        this.tableData = res.data.result
      })
    },
    uploadCancel () {
      this.workDialog = false
      this.workName = ''
      this.date = ''
      this.$refs.upload.clearFiles()
    },
    isDuringDate (str) {
      let curDate = new Date()
      let target = new Date(str)
      return curDate > target
    },
    init () {
      this.$http.get('/api/workContent/list/' + this.courseId).then((res) => {
        this.tableData = res.data.result
      })

      this.$http.get('/api/course/studentsForCourse/' + this.courseId).then((res) => {
        this.studentTable = res.data.result
      })
    }
  },
  created () {
    this.courseId = this.$store.state.course.courseId

    this.init()
  }
}
</script>

<style scoped>

</style>
